<!--
 * @Description: 出库明细
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-08-24 15:35:19
 * @FilePath: /yuxiuproweb/src/views/material/returnRecord/mods/detail.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="'出库明细'"
    :visible.sync="shows"
    width="60vw"
    append-to-body
  >
    <el-descriptions
      border
      :column="2"
      :size="'medium'"
      :label-style="label_style"
      :contentStyle="content_style"
    >
      <el-descriptions-item label="出库单号" label-class-name="myLabel">
        <span>{{ form.outboundId }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="出库日期" label-class-name="myLabel">
        <span>{{ form.createTime }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="供应商" label-class-name="myLabel">
        <span>{{ form.supplier }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="库存编码" label-class-name="myLabel">
        <span>{{ form.inventoryCode }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="型号" label-class-name="myLabel">
        <span>{{ form.frbaicName }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="门幅" label-class-name="myLabel">
        <span>{{ form.doorwidth }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="批号" label-class-name="myLabel">
        <span>{{ form.batchNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="myLabel">
        <span>{{ form.status }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="防水" label-class-name="myLabel">
        <span>{{ form.iswaterproof }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="库存数量" label-class-name="myLabel">
        <span>{{ form.inventoryQuantity }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="仓库名称" label-class-name="myLabel">
        <span>{{ form.repositoryName }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="货位" label-class-name="myLabel">
        <span>{{ form.goodsallocation }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="领用人" label-class-name="myLabel" :span="2">
        <el-input
          v-model="form.destination"
          placeholder="请输入领用人"
          type="input"
        />
      </el-descriptions-item>
      <el-descriptions-item label="备注" label-class-name="myLabel" :span="2">
        <el-input
          v-model="form.notes"
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
        />
      </el-descriptions-item>
      <el-descriptions-item label="操作" label-class-name="myLabel">
        <div class="">
          <el-button size="default" type="success" @click="submitForm"
            >保存</el-button
          >
          <el-button size="default" @click="shows = false">关闭</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  components: {},
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      list: [],
      label_style: {
        "text-align": "center", //文本居中
        "font-weight": "600",
        width: "140px",
        "word-break": "keep-all",
        padding: "6px",
      },
      content_style: {
        "min-width": "200px",
        "word-break": "break-all", //过长时自动换行
      },
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.form = Object.assign({}, this.data);
      console.log("form", this.form);
    },
    /** 提交按钮 */
    submitForm() {
      request({
        url: "/md/outbound",
        method: "put",
        data: this.form,
      }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess(res.msg || "保存成功");
          this.shows = false;
          this.$emit("update");
        } else {
          this.$message.error(res.msg || "操作失败");
        }
      });
      // putIsUrgent(this.form).then((res) => {
      //   this.$modal.msgSuccess(res.msg || "修改成功");
      //   this.shows = false;
      //   this.$emit("update");
      // });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
::v-deep .myLabel {
  font-weight: bold;
  font-size: 14px;
  color: #515a6e;
}
::v-deep .operateLabel {
  background: #faecd8;
  //e1f3d8 faecd8 79bbff
}
::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
</style>
